<template>
  <div class="form-section" v-if="showFieldsConfig">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.fields', '操作字段')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.fields',
              '表单中包含哪些字段，不选，则根据字段配置',
            )
          "
          prop="config.fields.fields"
        >
          <div class="item-border">
            <el-checkbox-group v-model="formData.config.fields.fields">
              <el-checkbox
                v-for="(item, index) in tableFields"
                :label="item.label"
                :value="item.value"
                :key="index"
              />
            </el-checkbox-group>
          </div>
        </el-form-item-plus>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" v-if="!formData.config.has_menu && !isApi">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.tab_config', '表单选项卡')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.tab_config',
              '表单中的字段可以分别在不同的选项卡中显示,其中详情类方法默认显示编号和创建时间等内置字段',
            )
          "
          prop="config.fields.tab_config"
        >
          <ra-tab-field
            v-model="formData.config.fields.tab_config"
            :fieldsList="tabFields"
          ></ra-tab-field>
        </el-form-item-plus>
      </el-col>
      <el-col :span="8" v-if="!formData.config.has_menu && !isApi">
        <el-row>
          <el-col :span="24">
            <el-form-item-plus
              :label="$t('menu.dev.action.field.span', '表单布局')"
              :tooltipContent="
                $t(
                  'menu.dev.action.tip.span',
                  '表单中的字段布局，如一行两列，一行三列等',
                )
              "
              prop="config.fields.span"
            >
              <el-select v-model="formData.config.fields.span">
                <el-option :value="24" label="一行一列"></el-option>
                <el-option :value="12" label="一行二列"></el-option>
                <el-option :value="8" label="一行三列"></el-option>
              </el-select>
            </el-form-item-plus>
          </el-col>
          <el-col :span="24">
            <el-form-item-plus
              :label="$t('menu.dev.action.field.label_width', '标签宽度')"
              :tooltipContent="
                $t(
                  'menu.dev.action.tip.label_width',
                  '表单标签的宽度，默认为 120px',
                )
              "
            >
              <el-input
                v-model="formData.config.fields.label_width"
                :placeholder="$p('menu.dev.action.field.label_width', '120px')"
              ></el-input>
            </el-form-item-plus>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

const route = useRoute();
const isApi = computed(() => route.query.app === 'api');

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  tableFields: {
    type: Array,
    default: () => [],
  },
  tabFields: {
    type: Array,
    default: () => [],
  },
});

const showFieldsConfig = computed(() => {
  return (
    (props.formData.config.customize.has_modal &&
      props.formData.config.customize.has_fields &&
      props.tableFields.length > 0) ||
    (props.formData.config.has_fields && props.tableFields.length > 0)
  );
});

const displayFields = computed(() => {
  // 确保 v-model 的值是一个数组，如果不是，则视为空数组
  // 同时，过滤掉数组中可能存在的 null 或 undefined 等无效值
  const selectedValues = (props.formData.config.fields.fields || []).filter(
    Boolean,
  );

  const existingValues = new Set(props.tableFields.map((item) => item.value));

  const missingFields = selectedValues
    .filter((value) => !existingValues.has(value))
    .map((value) => ({
      label: `${value} (已失效)`,
      value: value,
      disabled: true,
    }));

  return [...props.tableFields, ...missingFields];
});

// 同样对 v-model 本身做一下处理，确保它是一个有效的数组
// 这可以防止 el-checkbox-group 内部报错
const checkedFields = computed({
  get() {
    // getter：确保返回的是一个数组
    return (props.formData.config.fields.fields || []).filter(Boolean);
  },
  set(newValue) {
    // setter：当勾选变化时，更新原始数据
    props.formData.config.fields.fields = newValue;
  },
});
</script>

<style lang="scss" scoped></style>
